<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-06-24 16:34:28
 * @LastEditTime: 2024-07-10 10:48:19
 * @FilePath: \project\src\views\acl\permission\index.vue
-->
<template>
  <div>
    <el-table
      :data="permissionList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="name" label="名称" sortable />
      <el-table-column prop="code" label="权限值" sortable />
      <el-table-column prop="updateTime" label="修改时间" sortable />
      <el-table-column label="操作" width="280">
        <template #="{row}">
          <el-button size="small" @click="hAdd(row)" icon="user" :disabled="row.level==4">{{ row.level==3?'添加功能':'添加菜单' }}</el-button>
          <el-button size="small" @click="hEdit(row)" :disabled="row.level==1">编辑</el-button>
          <el-popconfirm
            width="220"
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="InfoFilled"
            :title="`确认删除${row.name}这个权限吗?`"
            @confirm="hDelete(row.id)"
          >
            <template #reference>
              <el-button type="danger" :disabled="row.level==1" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加菜单 -->
    <el-dialog v-model="dialogPer" :title="perForm.id?'修改':'添加'" width="500">
      <el-form :model="perForm" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="perForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="权限值">
          <el-input v-model="perForm.code" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogPer = false">取消</el-button>
          <el-button type="primary" @click="hSave">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reqGetPermission, reqAddEditPer, reqDelPermission } from '@/api/acl/permission';
import { MenuInfo, PermissionInfo } from '@/api/acl/permission/type';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

let permissionList = ref<PermissionInfo[]>([])
let dialogPer = ref<boolean>(false)
let perForm = reactive<MenuInfo>({
  pid: 0,
  level: 0,
  name:'',
  code:'',
})

// 获取权限
const getPermissiom = async ()=> {
  const res = await reqGetPermission()
  permissionList.value = res.data
}
onMounted(()=>{
  getPermissiom()
})

// 新增
const hAdd = (row:MenuInfo)=> {
  Object.assign(perForm, {
    name:'',
    code:'',
    pid: row.id,
    level: row.level+1,
  })
  dialogPer.value = true
}
// 编辑
const hEdit = (row:MenuInfo)=> {
  Object.assign(perForm, {...row})
  dialogPer.value = true
}
// 保存
const hSave = async ()=> {
  const res = await reqAddEditPer(perForm)
  if(res.code!=200) return ElMessage({type: 'error',message: perForm.id?'修改失败':'新增失败'})
  ElMessage({type: 'success',message: perForm.id?'修改成功':'新增成功'})
  getPermissiom()
  dialogPer.value = false
}
// 删除
const hDelete = async(id:number)=> {
  const res = await reqDelPermission(id)
  if(res.code!=200) return ElMessage({type: 'error',message: '删除失败'})
  ElMessage({type: 'success',message: '删除成功'})
  getPermissiom()
}
</script>

<style lang="scss" scoped>

</style>